<template>
	<div class="main-center">
		<div style="background: #fff;width: 100%;padding: 20px;">
			 <Input v-model="title" class="text-title">
		        <span slot="prepend">标题</span>
		    </Input>
		    <div style="margin-bottom: 20px;">
		    	<template v-for="i in tagArr">
		    		<Tag checkable color="green" :checked="false" @on-change="tagCheckable" :name="i">{{i}}</Tag>
		    	</template>
		    	<Button type="text" @click="addTag=true">添加标签</Button>
		    </div>
			<div ref="editor" style="text-align:left;"></div>
	        <Button @click="getContent" class="text-btn" type="primary">我去了...</Button>
		</div>
		<Modal
	        v-model="addTag"
	        title="添加标签"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <Input v-model="tagName" />
	    </Modal>
	</div>
</template>

<script>
	import { Button,Input,Tag,Modal   } from 'iview';
	import * as api from '@/assets/api.js';
	import Editor from 'wangeditor';
	 export default {
      name: 'editor',
      components: {
			Button,
			Input,
			Tag,
			Modal
		},
      data () {
        return {
          editorContent: '',
          tagArr:[],
          title:'',
          addTag:false,
          tagName:'',
          postTag:[]
        }
      },
      created(){
      	this.getTag()
      },
      methods: {
        getContent: function () {
            let postData = {
            	title:this.title,
            	tag:JSON.stringify(this.postTag),
            	content:this.editorContent
            }
            console.info(postData)
            api.postData('keepContent',postData, this).then((res) => {
				if(res.code == 200) {
					this.$Notice.success({
						title: '提示',
						desc: res.msg,
					});
					this.getTag();
				} else {
					this.$Notice.error({
						title: '提示',
						desc: res.msg,
					});
				}
			})				
        },
        ok(){
        	api.postData('addTag',{'name':this.tagName}, this).then((res) => {
				if(res.code == 200) {
					this.$Notice.success({
						title: '提示',
						desc: res.msg,
					});
					this.getTag();
				} else {
					this.$Notice.error({
						title: '提示',
						desc: res.msg,
					});
				}
				this.tagName=''
			})				
        },
        cancel(){
        	
        },
        
        getTag(){
        	api.getData('getTag', this).then((res) => {
				if(res.code == 200) {
					this.tagArr = res.data;
				} else {
					this.$Notice.error({
						title: '提示',
						desc: res.msg,
					});
				}
			})				
        },
        tagCheckable(checked, name){
        	if(this.postTag.indexOf(name)==-1&&checked){
        			this.postTag.push(name)
        	}
        	if(this.postTag.indexOf(name)>-1&&(!checked)){
        		this.postTag.splice(this.postTag.indexOf(name),1);
        	}
        	
        }
      },
      mounted() {
        var editor = new Editor(this.$refs.editor)
        editor.customConfig.onchange = (html) => {
          this.editorContent = html
        }
        let acn=[],acxn=[],accn=[],acqn=[],acmgn=[];
        for(let i=0;i<55;i++){
        	acn.push({
        		alt: i+1,
				src:('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac/')+((i+1)>=10?i+1:('0'+(i+1)))+'.gif'
        	})
        	acxn.push({
        		alt: i+1,
				src:('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac2/')+((i+1)>=10?i+1:('0'+(i+1)))+'.gif'
        	})
        }
        for(let i=0;i<50;i++){
        	accn.push({
        		alt: i+1,
				src:('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/ac3/')+((i+1)>=10?i+1:('0'+(i+1)))+'.gif'
        	})
        }
        for(let i=0;i<40;i++){
        	acmgn.push({
        		alt: i+1,
				src:('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/tsj/')+((i+1)>=10?i+1:('0'+(i+1)))+'.gif'
        	})
        }
        for(let i=0;i<16;i++){
        	acqn.push({
        		alt: i+1,
				src:('https://cdn.aixifan.com/dotnet/20130418/umeditor/dialogs/emotion/images/dog/')+((i+1)>=10?i+1:('0'+(i+1)))+'.gif'
        	})
        }
        editor.customConfig.emotions = [
        	{
        		title: 'AC娘',
        		type: 'image',
        		content:acn
        	},
        	{
        		title: 'AC新娘',
        		type: 'image',
        		content:acxn
        	},
        	{
        		title: 'AC彩娘',
        		type: 'image',
        		content:accn
        	},
        	{
        		title: 'AC魔改娘',
        		type: 'image',
        		content:acmgn
        	},
        	{
        		title: 'AC犬娘',
        		type: 'image',
        		content:acqn
        	}
        ]
//      editor.customConfig.uploadImgServer = 'http://192.168.1.62:8086/upload'
        editor.customConfig.uploadImgServer = 'http://www.shengliwudi.com:8086/upload'
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
        editor.customConfig.uploadFileName = 'file'
        editor.customConfig.zIndex = 1
        editor.create()
      }
    }
</script>

<style>
	.text-btn {
		display: block;
		margin: 20px auto;
	}
	.text-title {
		margin-bottom: 20px;
	}
</style>